<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url(images/bg4.jpg) center center fixed;
            background-size: cover;
        }

        .outbox {
            margin: 50px auto;
            width: 600px;
            height: 600px;
            background-color: #cb19a72a;
            text-align: center;
            border-radius: 20px;
            box-shadow: inset 0 0 20px #000;
            transform: scale(1.2 1);
        }

        .inbox {
            font-size: 40px;
            font-family: STXingkai;
            font-weight: 700;
            font-style: italic;
            display: inline-block;
            margin: auto;
        }

        img {
            position: relative;
            bottom: 0;
            left: 50%;
            transform: translatex(-50%);
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="outbox">
        <p class="inbox">成绩出来了！</p>
        <table border="1" cellspacing="0" width="600" height="400px">
            <caption>复杂完整的成绩表</caption>
            <tr>
                <th rowspan="2">姓名</th>
                <th colspan="2">通识课</th>
                <th colspan="3">专业课</th>
                <th rowspan="2">总分</th>
            </tr>
            <tr>
                <th>英语</th>
                <th>高数</th>
                <th>UI设计</th>
                <th>网页设计</th>
                <th>程序设计</th>
            </tr>
            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <th>张三</th>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <th>平均</th>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
        </table>
            <table border="1" cellspacing="0" align="center" style="margin-top: 30px;">
                <caption>成绩表</caption>
                <tr>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>总分</th>
                </tr>
                <tr>
                    <td>李小路</td>
                    <td>60</td>
                    <td>58</td>
                    <td>118</td>
                </tr>
                <tr>
                    <td>安可可</td>
                    <td>80</td>
                    <td>20</td>
                    <td>100</td>
                </tr>
            </table>
        </div>
    </div>
<img src="images/代码.png" alt="">
</body>

</html>